<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>商品单价</th>
                <th>商品数量</th>
                <th>商品小计</th>
                <th>商品操作</th>
            </tr>
        </thead>
        <tbody id="list">
            <!--  -->
        </tbody>
    </table>

    <script>
        let productsData = [
            { id: '001', name: '羽绒服', price: 200, count: 17 },
            { id: '002', name: '运动鞋', price: 300, count: 7 },
            { id: '003', name: '短裤', price: 20, count: 110 },
            { id: '004', name: '毛衣', price: 150, count: 5 },
        ]

        const listEle = document.querySelector('#list');

        productsRender();


        // 事件委托
        listEle.onclick = function (e) {
            // 删除按钮
            if (e.target.className == 'delete-btn') {
                // 方案一：splice(下标, 1)
                // productsData.splice(e.target.dataset.index, 1);

                // 方案二：filter()
                // productsData = productsData.filter(item => {
                //     return item.id !== e.target.dataset.id;
                // })
                deleteById(e.target.dataset.id);

                productsRender();
            }
        }

        // 数量增加
        listEle.addEventListener("click", function (e) {
            if (e.target.className == 'plus-btn') {
                // 通过id获取到一个商品对象
                const productItem = productsData.find(item => item.id == e.target.dataset.id)
                productItem.count++;
                productsRender();
            }
        })
        // 数量减少
        listEle.addEventListener("click", function (e) {
            if (e.target.className == 'minus-btn') {
                // 通过id获取到一个商品对象
                const productItem = productsData.find(item => item.id == e.target.dataset.id);
                if (productItem.count > 1) {
                    productItem.count--;
                } else {
                    // productsData = productsData.filter(item => {
                    //     return item.id !== e.target.dataset.id;
                    // })
                    deleteById(e.target.dataset.id)
                }
                productsRender();
            }
        })


        function deleteById(deleteId) {
            productsData = productsData.filter(item => {
                return item.id !== deleteId;
            })
        }

        function productsRender() {
            listEle.innerHTML = productsData.map((item, index) => {
                return (
                    `
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.price}</td>
                        <td>
                            <button data-id="${item.id}" class="minus-btn">-</button>
                            ${item.count}
                            <button data-id="${item.id}" class="plus-btn">+</button>
                        </td>
                        <td>${item.count * item.price}</td>
                        <td>
                            <button data-index="${index}" data-id="${item.id}" class="delete-btn">删除</button>
                        </td>
                    </tr>
                    `
                )
            }).join("")
        }

    </script>
</body>

</html>